<template>
    <div class="copyEntry">
        <!-- 操作记录#575757 -->
        <el-dialog title="操作记录" :visible.sync="dialogVisible" width="50%" top="5vh" custom-class="import-dialog" :close-on-click-modal="false">
            <div v-for="item in IndexSourceOperatorLog" :key="item.operationLogCode">
                <template>
                    <div class="recordType" v-if="['1', '2', '3', 1, 2, 3].includes(item.modifyType)">【{{ item.modifyType == 1 ? '新增' : item.modifyType == 2 ? '修改' : '删除' }}来源】</div>
                    <div class="recordType" v-if="item.modifyType == '4' || item.modifyType == 4">【条款导入】</div>
                    <div class="recordType" v-if="item.modifyType == '5' || item.modifyType == 5 || item.modifyType == '6' || item.modifyType == 6">【待办处理】</div>
                    <div class="recordDetail">
                        <span class="recordMessage"
                            >&nbsp;&nbsp;{{ item.modifyDate }} {{ item.modifyTime }}&nbsp;&nbsp;{{ item.modifyUser }}&nbsp;&nbsp;版本号：{{
                                item.articleDetailsCode
                            }}</span
                        >
                        <template v-if="item.modifyText && ['1', '2', '3', 1, 2, 3].includes(item.modifyType)">
                            <div
                                v-for="(item2, index) in item.modifyText[0]['com.yhfin.risk.web.common.pojos.compliance.IndexArticleDetailsPO']"
                                :key="index"
                            >
                                <span class="recordDetailType">【{{ item2.moduleDetail }}】</span>
                                <span v-if="item.modifyType == 1">{{ item2.afterChange }}</span>
                                <span v-else-if="item.modifyType == 2"
                                    >{{ item2.beforeChange }}<span style="color: black"> --> </span>{{ item2.afterChange }}</span
                                >
                                <span v-else-if="item.modifyType == 3">{{ item2.afterChange }}</span>
                            </div>
                        </template>
                        <template v-if="item.modifyType == '4' || item.modifyType == 4">
                            <div>{{ item.modifyText.replace(/"/g, '') }}</div>
                        </template>
                        <template v-if="item.modifyType == '5' || item.modifyType == 5">
                            <div>关闭原因：{{ item.modifyText.replace(/"/g, '') }}</div>
                        </template>
                        <template v-if="item.modifyType == '6' || item.modifyType == 6">
                            <div>开启原因：{{ item.modifyText.replace(/"/g, '') }}</div>
                        </template>
                    </div>    
                </template>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { timeFormat } from '@/utils/tools';

@Component({
    name: 'EntryRecordDialog',
    components: {},
})
export default class EntryRecordDialog extends Vue {
    @Prop() entryRecordDialog;
    @Prop() entryRecordItem;
    private dialogVisible: boolean = false;
    private IndexSourceOperatorLog = [];
    @Watch('entryRecordDialog')
    watchEntryRecordDialog(val) {
        if (val == true) {
            console.log(this.entryRecordItem, 'entryRecordItem');

            this.$axios.post('/zhiguan/indexArticle/operation/log', { articleCode: this.entryRecordItem.id }).then((res: any) => {
                if (res) {
                    this.IndexSourceOperatorLog = [];
                    this.dialogVisible = val;
                    res.forEach(item => {
                        console.log('item.modifyType', item.modifyType, typeof item.modifyType)
                        if (item.modifyText && ['1', '2', '3', 1, 2, 3].includes(item.modifyType)) {
                            let modifyTexts = JSON.parse(item.modifyText);
                            item.modifyText = modifyTexts;
                        }
                        let modifyTimes = item.modifyTime;
                        item.modifyTime = timeFormat(modifyTimes, true);
                        this.IndexSourceOperatorLog.push(item);
                    });
                    console.log('操作记录', this.IndexSourceOperatorLog)
                }
            });
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitEntryRecordDialog', false);
        }
    }
}
</script>
<style lang="scss" scoped>
.recordType {
    color: #575757 !important;
    font-weight: bold !important;
}
.recordDetail {
    color: #de1f37 !important;
    margin: 5px 0 !important;
}
.recordMessage {
    color: #575757 !important;
}
.recordDetailType {
    color: #008018 !important;
}
</style>
